<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>设置内容和属性</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                //设置或返回所选元素的文本内容
                $("#test1").text("Hello world!");
            });
            $("#btn2").click(function () {
                // 设置或返回所选元素的内容（包括 HTML 标记）
                $("#test2").html("<b>Hello world!</b>");
            });
            $("#btn3").click(function () {
                // 设置或返回表单字段的值
                $("#test3").val("RUNOOB");
            });
            // 修改css属性值
            $(".btn4").click(function () {
                $("#runoob").attr("href", "https://www.baidu.com/").text('百度！');
            });

            //回调return
            $(".btn5").click(function () {
                $("#runoob2").attr("href", function (i, origValue) {
                    //返回值
                    return origValue + "/jquery";
                });
            });
        });


        // $(function () {
        //     $("#btn1").click(function () {
        //         $("#test1").text(function (i, origText) {
        //             return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
        //         });
        //     });

        //     $("#btn2").click(function () {
        //         $("#test2").html(function (i, origText) {
        //             return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
        //         });
        //     });

        // });
    </script>
</head>

<body>
    <p id="test1">这是一个段落。</p>
    <p id="test2">这是另外一个段落。</p>
    <p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
    <p><a href="//www.runoob.com" id="runoob2">菜鸟教程</a></p>
    <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    <button class="btn4">设置属性</button>
    <button class="btn5">回调函数</button>
</body>

</html>